<!--日期-->
<template>
	<zh-form-item
		:ref="prop"
		:label="label"
		:prop="prop"
		:span="span"
		:md="md"
		:sm="sm"
		:xs="xs"
		:lg="lg"
		:xl="xl"
		:offset="offset"
		:push="push"
		:pull="pull"
		:tag="tag"
	>
		<el-date-picker
			style="width: 100%"
			v-model="value"
			v-bind="allAttrs"
      :id="'zhDataF' + columnId"
			:name="'zhDataF' + columnId"
			:size="mySize"
			:format="myformat"
			:value-format="myvalueFormat"
			:clearable="clearable"
			:disabled="getDisabled()"
		>
      <template #[item]="data" v-for="item in Object.keys($slots)">
        <slot :name="item" v-bind="data || {}"></slot>
      </template>
		</el-date-picker>
	</zh-form-item>
</template>

<script lang="ts" setup>
// 引入组件需要的属性 引入表单子控件的管理类
import { formItemProps, itemProps, itemController, initDate } from '../lib/mapController';
// 定义属性
const props = defineProps({
	...itemProps, // 基础属性
	...formItemProps,
	modelValue: [String, Date, Number],
});
const attrs = useAttrs();
const emit = defineEmits(['update:modelValue']);
const allAttrs = computed(() => {
	return Object.assign(props.extend, attrs);
});
const state = reactive({
	mySize: allAttrs.value.size,
});
const { value, globalSize } = itemController(props, allAttrs.value, emit);
// 初始化
globalSize(state);
// 输出
const {
	myformat, // 默认的格式化
	myvalueFormat, // 返回值的格式化
} = initDate(allAttrs);
const { mySize } = toRefs(state);
let golbalProps: any = inject('golbalProps', {});
//获取可编辑设置
const getDisabled = () => {
	if (props.disabled === null || props.disabled === undefined) {
		return golbalProps.disabled;
	} else {
		return props.disabled;
	}
};
</script>
<script lang="ts">
// 声明额外的选项
export default {
	name: 'zh-form-date',
	inheritallAttrs: false,
};
</script>

<style></style>
